<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            border: 2px solid red;
        }
        .danger{
            color: orange;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="p1">不凡学院</p>
        <!-- 行内绑定事件 可以直接获取元素本身 -->
        <p class="p2" ondblclick="removeCurrent(this)">不凡学院2</p>
    </div>
    <p class="danger">警告！</p>
    <!-- dom的增删改操作 -->
    <button onclick="addImgDom()">新增图片</button>
    <button onclick="removeImg()">删除元素</button>
    <button onclick="moveDangerDom()">移动元素</button>
    <button onclick="cloneDangerDom()">clone元素</button>
    <script>
        var boxEl = document.querySelector('.box');
        function addImgDom(){
             // 1. 创建元素
            // 创建一个图片
            // 新的标签(元素节点) = document.createElement("标签名");
            var imgEl = document.createElement('img');
            imgEl.src = 'img/a.jpg';
            imgEl.className = 'img';
            // 2. 插入元素
            // 2.1 父节点.appendChild(新的子节点);
            // boxEl.appendChild(imgEl);
            // 2.2 父节点.insertBefore(新的子节点, 作为参考的子节点);
            var p2El = document.querySelector('.p2');
            boxEl.insertBefore(imgEl,p2El);
        }

        function removeImg(){
            var imgEl = document.querySelector('.box .img');
            console.log(imgEl);
            if(imgEl){
                // 父节点.removeChild(子节点);
                boxEl.removeChild(imgEl);
            }else{
                console.log('删除的元素不存在!');
            }
        }
        /**
        * 双击移除当前元素
        */
        function removeCurrent(el){
            // console.log(this);
            // console.log(el);
            el.parentNode.removeChild(el);
        }
        /**
        * 把p标签移动到 box
        **/
        function moveDangerDom(){
            // 已存在的元素
            var dangerDom = document.querySelector('.danger');
            // 测试appendChild效果
            boxEl.appendChild(dangerDom);
        }

        /**
        * clone p标签到box
        **/
       function cloneDangerDom(){
           // 已存在的元素
           var dangerDom = document.querySelector('.danger');
           // clone标签 参数true 是深度克隆
           var dangerDomClone = dangerDom.cloneNode(true);
            boxEl.appendChild(dangerDomClone);
       }
    </script>
</body>
</html>